<template>
    <div class="bodys">
        

    </div>
    <div class="box">
        <h1>锁屏</h1>
        <input type="password" value="" placeholder="密码" @input="pss($event.target.value)" @keypress="handleKeyPress">
        <div style="height: 10px;"></div>
        <el-button type="primary" @click="handleSubmit()" style="width: 200px;height: 3.8vh;" round>解锁</el-button>
    </div>
</template>
  
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';

// 在组件内部使用 onBeforeRouteLeave 导航守卫

const router = useRouter();
const password = ref('');
const isUnlocked = ref(false);
const pss = (value) => {
    console.log(value);
    password.value = value
}
onBeforeRouteLeave((to, from, next) => {
  // 检查解锁状态，如果未解锁则禁止路由跳转
  if (!isUnlocked.value) {
    next(false);
  } else {
    next(); // 解锁成功，允许路由跳转
  }
});

// 在组件外部使用 onBeforeRouteUpdate 导航守卫
onBeforeRouteUpdate((to, from, next) => {
  // 检查解锁状态，如果未解锁则禁止路由更新
  if (!isUnlocked.value) {
    next(false);
  } else {
    next(); // 解锁成功，允许路由更新
    // router.push('/index').catch(() => { });

  }
});
const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
        if (!password.value) {
            ElMessage({
                message: '请输入密码',
                type: 'warning',
            });
        } else {
            handleSubmit();
        }
    }
};
const handleSubmit = () => {
    if (password.value == JSON.parse(localStorage.getItem('data')).data.show_pass) {
        ElMessage({
            message: '解锁成功',
            type: 'success',
        });
        isUnlocked.value = true
        handleUnlockSuccess()
        // document.exitFullscreen(); // 退出全屏
        sessionStorage.setItem('states',1)
        router.replace('/index');
    } else {
        ElMessage({
            message: '密码错误',
            type: 'error',
        });
    }
    console.log('密码值为：', password.value);
    // 在这里可以对密码进行处理或提交到后端
};
// const requestFullScreen = () => {
//     const element = document.documentElement;
//     if (element.requestFullscreen) {
//         element.requestFullscreen();
//     } else if (element.mozRequestFullScreen) {
//         element.mozRequestFullScreen();
//     } else if (element.webkitRequestFullscreen) {
//         element.webkitRequestFullscreen();
//     } else if (element.msRequestFullscreen) {
//         element.msRequestFullscreen();
//     }
// };

// onMounted(() => {
//     requestFullScreen();
// });
onBeforeUnmount(() => {
    // 在组件销毁前清理星星
    const stars = document.querySelectorAll('.star');
    stars.forEach((star) => star.remove());
    window.removeEventListener('keypress', handleKeyPress);
});
const handleUnlockSuccess = () => {
//   // 解锁成功后移除对键盘事件和鼠标事件的阻止
//   window.removeEventListener('contextmenu', function (e) {
//     e.preventDefault();
//   });
//   window.removeEventListener('keypress', handleKeyPress);
//   window.removeEventListener('keydown', function (e) {
//     if (e.key === 'F12' || (e.key === 'Escape' && document.fullscreenElement) || e.key === 'F11') {
//       e.preventDefault();
//     }
//   });
};
</script>
  
<style  scoped>
.bodys {
    width: 100%;
    height: 100vh;
    background-image: url(http://lxt.jingyi.icu/uploads/20240126/1c85d6b336c02bacdd96397e7c036ea8.jpg);
    background-size: 100% 100%;
}


.box {
    width: 400px;
    padding: 40px;
    padding-bottom: 5vh;
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
    background: #fff;
    text-align: center;
    box-shadow: 20px 25px 45px 15px;
    z-index: 99999;
    border-radius: 10px;

}

.box h1 {
    color: #000;
    text-transform: uppercase;
    font-weight: 500;
}


.box input {
    background: none;
    display: block;
    margin: 20px auto;
    text-align: center;
    border: 2px solid #3498db;
    padding: 14px 10px;
    width: 200px;
    outline: none;
    color: #000;
    border-radius: 24px;
    transition: 0.25s;
}

.box input:hover {
    width: 280px;
    border-color: #2ecc71;
}

</style>